<template>
    <el-card class="box-card">
        <el-form 
            ref="form"
            :rules="rules"
            :model="proForm"
            :inline="true"
            label-width="80px"
            label-position="top"
        >
            <el-row>
                <el-col :span="14">
                    <el-form-item label="项目名称：" prop="name">
                        <el-input
                            size="big"
                            v-model="proForm.name" 
                            style="width: 250px">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="项目描述：" prop="desc">
                        <el-input
                            size="big"
                            v-model="proForm.desc" 
                            style="width: 250px">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="14">
                    <el-form-item label="项目地址：" prop="url">
                        <el-input
                            size="big"
                            v-model="proForm.url" 
                            style="width: 250px">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="项目封面：">
                        <el-upload
                            class="upload-demo"
                            drag
                            action="https://jsonplaceholder.typicode.com/posts/"
                            multiple>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
              <el-form-item>
                <el-button type="primary" @click="submitPro">完成</el-button>
                <el-button type="danger">返回</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            id: this.$route.params.id || "",
            proForm: {
                name: "",
                desc: "",
                url: "",
                img: ""
            },
            rules: {
                name: [{ required: true, message: "请输入项目标题", trigger: 'change' }],
                desc: [
                    { required: true, message: '请输入项目描述', trigger: 'change' },
                    { max: 120, message: '描述最多可写120个字符', trigger: 'change' }
                ],
                url: [{ required: true, message: '请输入项目地址', trigger: 'change' }],
            }
        }
    },
    methods: {
        async getProjectInfo(id) {
            const { data: res } = await this.$http.get(`/project/getproinfo/${id}`)
            console.log("-------------------", res.data)
            if (res.status !== 200) {
                return this.$message.error(res.message)
            }
            this.proForm = res.data
        },
        async submitPro() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    if (this.id) {
                        const { data: res } = await this.$http.put(`/project/editpro/${this.id}`, this.proForm)
                        if (res.status !== 200) {
                            return this.$message.error(res.message)
                        }
                        this.$router.push("/admin/prolist")
                        this.$message({
                            type: "success",
                            message: "更新文章成功"
                        })
                    } else {
                        const { data: res } = await this.$http.post("/project/addpro", this.proForm)
                        if (res.status !== 200) {
                            return this.$message.error(res.message)
                        }
                        this.$router.push("/admin/prolist")
                        this.$message({
                            type: "success",
                            message: "添加文章成功"
                        })
                    }
                } else {
                    return this.$message.error("输入的数据不正确！请重新输入。。。")
                }
            })
        }
    },
    mounted() {
        if (this.id) {
            this.getProjectInfo(this.id)
        }
    }
}
</script>

<style scoped>

</style>